<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="js/axios-0.21.0.js"></script>
</head>
<body>
<div id="app" class="container" style="margin-top:20px">


    <hr style="border:solid 2px red">

<!--    <div class="row">-->
<!--        <div class="col-md-4 col-md-offset-4">-->
<!--            <ul class="nav nav-pills " style="padding-top:10px">-->
<!--                <li  style="margin: 10px;background:rgb(255,102,102)"><h5 style="margin:15px;color:rgb(255,231,250)">1.填写信息</h5></li>-->
<!--                <li  style="margin: 10px;background:rgb(246,246,246)"><h5 style="margin:15px" class="text-muted">2.验证邮箱</h5></li>-->
<!--                <li  style="margin:10px;background:rgb(246,246,246)"><h5 style="margin:15px" class="text-muted">3.注册成功</h5></li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h4 style="color:red;font-family: 宋体;text-align: center">以下均为必填项</h4>
            <form class="form-horizontal">
<!--                <div class="form-group">-->
<!--                    <label for="email" class="col-sm-3 control-label">请填写您的Email地址:</label>-->
<!--                    <div class="col-sm-9">-->
<!--                        <div class="row">-->
<!--                            <div class="col-md-5">-->
<!--                                <input type="email" class="form-control" id="email" placeholder="Email" v-model="email">-->
<!--                            </div>-->
<!--                            <div class="col-md-7">-->
<!--                                <span>请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="form-group">
                    <label for="nickname" class="col-sm-3 control-label">设置您的昵称:</label>
                    <div class="col-sm-9">
                        <div class="row">
                            <div class="col-md-5">
                                <input type="text" class="form-control" id="nickname" placeholder="nickname" v-model="username">
                            </div>
                            <div class="col-md-7">
                                <span>您的昵称由小写英文字母、中文和数字组成，长度4－20个字符。</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pwd1" class="col-sm-3 control-label">设置密码:</label>
                    <div class="col-sm-9">
                        <div class="row">
                            <div class="col-md-5">
                                <input type="password" class="form-control" id="pwd1" placeholder="Password1" v-model="password1">
                            </div>
                            <div class="col-md-7">
                                <span>您的密码由大小写英文字母和数字组成，长度6－20位。</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="pwd2" class="col-sm-3 control-label">再次输入您设置的密码:</label>
                    <div class="col-sm-9">
                        <div class="row">
                            <div class="col-md-5">
                                <input type="password" class="form-control" id="pwd2" placeholder="Password2"  v-model="password2">
                            </div>
                            <div class="col-md-7">
                                <span>两次密码必须一致。</span>
                            </div>
                        </div>

                    </div>
                </div>
<!--                <div class="form-group">-->
<!--                    <label for="validateCode" class="col-sm-3 control-label">验证码:</label>-->
<!--                    <div class="col-sm-9 ">-->
<!--                        <div class="row">-->
<!--                            <div class="col-md-5 form-inline">-->
<!--                                <img :src="src" @click="changeCode"  alt="" height="50px">-->
<!--                                <input type="text" class="form-control" id="validateCode" placeholder="validateCode" style="width:170px" v-model="code">-->
<!--                            </div>-->
<!--                            <div class="col-md-7">-->
<!--                                <span>请输入图片中的四个字母。<a href="">看不清楚？换个图片</a></span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="button" class="btn btn-primary" @click="regist">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    new Vue({
      el:"#app",
      data:{
          username:"",
          password1:"",
          password2:"",
      },
      methods:{
          regist(){
              let regex = /^(?=.*[a-z])[a-z\d\u4E00-\u9FA5]{4,20}$/;
              if(!regex.test(this.username)){
                  alert("用户名格式不正确");
                  return;
              }
              regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/;
              if(!regex.test(this.password1)){
                  alert("密码格式不正确");
                  return;
              }
              let data="username="+this.username+"&pw1="+this.password1
              axios.post("/user/regist",data).then(resp=>{
                  console.log(resp.data.message);
                  if (this.password1!=this.password2){
                      alert("两次密码不一致");
                  }else if (resp.data.message=="success"){
                      alert("注册成功");
                      location.href="login.html";
                  }else if(resp.data.message=="user-existed"){
                      alert("用户名已存在");
                      location.href="login.html";
                  }else {
                     alert("注册失败");
                  }
              }).catch(error=>{console.log(error)})
          }
      }
    })
</script>
</body>
</html>